<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过度</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: lightblue;
				
				/* 过度transition: 过渡的属性 过渡时间 速度
				ease：默认值，慢快慢
				linear：匀速
				ease-in：低速开始
				ease-out：低速结束
				ease-in-out:低速开始和结束
				*/
				/* transition:width 3s linear 1s; */
				/* all:所有的 */
				transition: all 3s linear;
			}
			.box:hover{
				width: 800px;
				height: 500px;
				background-color: aqua;
				/* transform转换：
				 1.位移translate（x轴方向，y轴方向）/translatex（x轴方向）translatey（y轴方向）
				 位移的值可以是百分比，对应自身宽高的百分比。
				 2.缩放scale（）：倍数
				 */
				/* transform: translate(100px); */
				/* transform: scale(-2); */
				/* transform: skewY(60deg); */
				/* transform: rotateX(-90deg); */
				/* 复合写法: */
				transform: translateY(-100px) scale(2) rotateY(45deg);
				transform-origin: center;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
